//定义懒加载插件
import {useIntersectionObserver} from "@vueuse/core";

export const lazyPlugin={
  //将APP实参传入
  install(app){
    //懒加载指令逻辑
    app.directive('img-lazy',{
      mounted(el,binding){
        //el:指令绑定的元素
        //binding:指令绑定的信息，例如：binding.value就是指令绑定的值
        useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if(isIntersecting){
              // 图片进入视口,进行渲染
              el.src=binding.value
              //第一次赋值完毕后取消观察
              stop()
            }
          },
        )
      }
    })

  }
}
